<template>
  <div class="w-[1000px] h-[200px] mx-auto mt-5 flex">
    <div class="w-80">
      <img class="w-72" src="../../assets/img/logo.png">
    </div>
    <div class="searchmain">
      <div class="absolute top-0 left-5">
        <button :class="{ active: isActive === 'commodity' }" @click="isActive = 'commodity'">商品</button>
        <span class="mx-1">|</span>
        <button :class="{ active: isActive === 'store' }" @click="isActive = 'store'">店铺</button>
      </div>
      <div class="searchinput">
        <input type="text" v-model="searchContent">
        <button class="searchbtn" @click="getSearch()">搜索</button>
      </div>
    </div>
  </div>
  <div class="w-[1500px] bg-zinc-100 mx-auto pt-5 pb-10">
    <div class="clearfix w-[450px] h-[300px] border-2 border-solid border-rose-500 inline-block rounded-lg ml-2">
      <ul class="w-[450px] h-[100px] pt-5 pl-2.5" v-for="(item, index) in listTitle">
        <span class="w-[150px] text-2xl font-bold relative top-0 right-[290px] leading-[50px]">{{ item }}</span>
        <span class="w-[300px] h-[60px] float-left relative top-1 left-32">
          <li v-for="(innerItem, innerIndex) in innerList[index]" :key="innerItem"
            class="hover:text-rose-500 float-left cursor-pointer" @click="Sort(innerItem)"> {{ innerItem }} <span
              class="text-zinc-300" v-show="innerIndex < 7">&nbsp;|&nbsp;&nbsp;</span>
          </li>
        </span>
        <hr class="bg-rose-400 h-[1px] w-[420px] mt-6 border-none" v-show="index < 2">
      </ul>
    </div>
    <div class="w-[1000px] float-right mr-2">
      <div class="block text-center">
        <el-carousel trigger="click" height="300px">
          <el-carousel-item v-for="item in imgList" :key="item.id">
            <img class="w-[1000px] h-[300px]" :src="item.idView">
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div class="new clearfix">
      <h1 class="font-bold text-4xl text-center h-16 leading-[64px] mt-10">新品推荐</h1>
      <div class="mx-auto py-4 my-4">
        <div
          class="w-[32%] h-[250px] float-left m-2 p-2.5 rounded-lg border-2 border-solid border-zinc-300 hover:border-rose-500"
          v-for=" item in newData" :key="item" @click="commodityDetail(item.productId)">
          <img class="w-1/2 h-full float-left" :src="`http://127.0.0.1:8081${item.productImage}`" alt="">
          <div class="w-1/2 inline float-left pl-2 mt-5">
            <span
              class="title inline-block text-xl font-bold text-ellipsis overflow-hidden">{{ item.productProfile }}</span>
            <span class="text-red text-2xl font-bold mt-5 inline-block">￥{{ item.sellPrice }}</span>
            <div class="mt-5">
              <span class="float-left">{{ item.businessName }}</span>
              <span class="float-right">{{ item.businessAddress }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="clearfix mt-5">
      <h1 class="font-bold text-4xl text-center h-16 leading-[64px] mt-10">猜你喜欢</h1>
      <div class="mx-auto py-4 my-4">
        <div
          class="w-[23%] h-[480px] float-left mt-2.5 mx-3.5 px-3 py-2.5 border-2 border-solid border-zinc-300 hover:border-rose-500"
          v-for="item in recommendData" :key="item" @click="commodityDetail(item.productId)">
          <img class="w-full h-2/3" :src="`http://127.0.0.1:8081${item.productImage}`" alt="">
          <span
            class="title inline-block text-xl font-bold mt-2 text-ellipsis overflow-hidden">{{ item.productProfile }}</span>
          <span class="text-red text-2xl font-bold">￥{{ item.sellPrice }}</span>
          <div class="mt-2">
            <span class="float-left">{{ item.businessName }}</span>
            <span class="float-right">{{ item.businessAddress }}</span>
          </div>
        </div>
        <el-backtop class="bg-yellow w-24 h-24" :right="0">
          <div class="w-24 text-center p-1 text-sm bg-rose-400 text-white hover:bg-rose-500">回到顶部</div>
        </el-backtop>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      isActive: 'commodity',
      newData: [],
      recommendData: [],
      listTitle: [ '基础护肤', '精致妆容', '清洁香氛' ],
      innerList: [],
      imgList: [
        { id: 0, idView: 'src/assets/img/carousel1.png' },
        { id: 1, idView: 'src/assets/img/carousel2.png' },
        { id: 2, idView: 'src/assets/img/carousel3.png' },
        { id: 3, idView: 'src/assets/img/carousel4.png' },
      ],
    }
  },
  mounted() {   // 钩子函数
    this.getData()
    this.getCate()
  },
  methods: {
    getData() {
      axios( {
        url: 'http://127.0.0.1:8081/api/selectMainProduct',
        method: 'post',
      } ).then( res => {
        this.newData = res.data.data.newProductList
        this.recommendData = res.data.data.recommendProductList
      } )
    },
    getCate() {
      axios( {
        url: 'http://127.0.0.1:8081/api/selectMainCate',
        method: 'post',
      } ).then( res => {
        this.innerList[ 0 ] = res.data.data.cateSkincareList
        this.innerList[ 1 ] = res.data.data.cateMakeupList
        this.innerList[ 2 ] = res.data.data.cateScentAndCleanList
      } )
    },
    // 页面跳转
    getSearch() {
      if ( this.searchContent.length == 0 ) {
        alert( '搜索内容不可为空' )
      } else {
        window.localStorage.setItem( "searchContent", this.searchContent );
        if ( this.isActive === 'commodity' ) {
          this.$router.push( '/commodityList' )
        } else {
          this.$router.push( '/storeList' )
        }
      }
    },
    // 页面跳转
    commodityDetail( productId ) {
      window.localStorage.setItem( "productId", productId );
      this.$router.push( '/commodityDetail' )
    },
    // 页面跳转
    Sort( cateName ) {
      window.localStorage.setItem( "cateContent", cateName );
      this.$router.push( '/sort' )
    }
  }

}
</script>

<style scoped >
.clearfix:after {
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.active {
  color: #ff0062;
}


.searchmain {
  font-size: 20px;
  width: 700px;
  height: 138px;
  line-height: 138px;
  display: flex;
  position: relative;
  margin-left: 30px;
}


.searchmain input {
  width: 700px;
  height: 60px;
  border: 2px solid #ff0062;
  border-radius: 30px;
  padding-left: 120px;
  outline: none;
}

.searchbtn {
  background-color: #ff0062;
  width: 100px;
  height: 60px;
  line-height: 60px;
  border-radius: 30px;
  color: white;
  font-size: 23px;
  position: absolute;
  top: 39px;
  left: 600px;

}
</style>